<!-- eslint-disable eqeqeq -->
<template>
  <div>
    <div class="box">
      <el-row :gutter="18" class="BigBox">
        <!-- 工单统计，销售统计 -->
        <el-col>
          <div class="GDBox">
            <div class="One">
              <div>工单统计 <span>2022.10.01 ~ 2022.10.14</span></div>
              <div class="details">
                <div>
                  <p>253</p>
                  工单总数（个）
                </div>
                <div>
                  <p>1</p>
                  完成单数（个）
                </div>
                <div>
                  <p>0</p>
                  进行工单（个）
                </div>
                <div>
                  <p>245</p>
                  取消工单（个）
                </div>
              </div>
            </div>
            <div class="Two">
              <div>销售统计 <span>2022.10.01 ~ 2022.10.14</span></div>
              <div class="undetails">
                <div>
                  <p>{{statistical.TotalNumberOrdersData}}</p>
                  订单量（个）
                </div>
                <div>
                  <p>{{statistical.SalesData}}</p>
                  销售额（万元）
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 销售数据 -->
        <el-col class="XsBigBox">
          <div class="XsTop">
            <div class="firstOne">销售数据<span><span>{{AllDay.xAxis[0]}}</span> ~ <span>{{AllDay.xAxis[AllDay.xAxis.length - 1]}}</span></span></div>
            <div class="yeru">
              <div v-for="(item, index) in years" :key="index" :class="{'bianhua': index === isindex}"
                @click="ChangeClass(item, index)">{{item}}</div>
            </div>
          </div>
          <div class="XsCjBox">
          <div class="LeftXSBox" ref="Left" >销售</div>
          <div class="RightXSBox" ref="Right" v-show="MDay.series[0] == true">销售</div>
          <div class="RightXSBox" v-if="MDay.series[0] == false"><el-empty description="暂无数据"></el-empty></div>
        </div>
        </el-col>
      </el-row>
      <!-- 侧边商品热榜 -->
      <el-row :gutter="18" class="SideRight">
        <el-col><div class="XSBox">
          <div class="HotS">商品热榜<span>2022.10.01 ~ 2022.10.15</span></div>
          <div v-for="(item, index) in statistical.HotSellingGoodsData" :key="index" class="XSitemBox">
          <el-col :span="4" class="SpanTxt">
            <span ><img src="../../assets/SVG/旗帜.svg" alt="" style="width: 140%; height: 140%;" class="icons"></span>
            <span class="text" :class="index === statistical.HotSellingGoodsData.length-1 ? 'last-index' : ''">{{index + 1}}</span>
          </el-col>
          <el-col :span="14">{{item.skuName}}</el-col>
          <el-col :span="6" class="count">{{item.count}}单</el-col>
          </div>
        </div></el-col>
      </el-row>
    </div>
    <!-- 底部合作商点，监控 -->
    <div class="BottomBox">
      <el-row :gutter="18" class="BottomLeft">
        <el-col>
          <div class="HZTop5">
            <div class="HzTop5Txt">合作商点位数Top5</div>
            <div @click="HzMoreFn"><img src="../../assets/SVG/更多.svg" alt="" style="width: 20px;"></div>
          </div>
          <div class="Pie">
          <div class="SDBox" ref="SDBox">商点</div>
          <div class="DWBox">
            <div>{{statistical.TotalNumberPointsData}}</div>
            <div class="text">点位数</div>
            <div>{{statistical.MerchantsData}}</div>
            <div class="text">合作商数</div>
          </div>
        </div>
        </el-col>
      </el-row>
      <el-row :gutter="18" class="BottomRight">
        <el-col>
          <div class="JKBox">
          <div class="JKTxt">异常设备监控</div>
          <div @click="HzMoreFn"><img src="../../assets/SVG/更多.svg" alt="" style="width: 20px;"></div>
        </div>
        <div>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// VUEX模块化使用辅助函数
import { createNamespacedHelpers } from 'vuex'
// echarts配置项引入
import { LinearSetOption, ColumnarOption, PieChartOption } from '@/ECharts'
const { mapActions } = createNamespacedHelpers('home') // 给定路径
export default {
  data () {
    return {
      isindex: 0,
      years: ['周', '月', '年'],
      weeks: null,
      AllDay: {
        xAxis: '',
        series: ''
      },
      MDay: {
        xAxis: '',
        series: ''
      },
      // 请求回来的数据
      statistical: {
        // 订单量
        TotalNumberOrdersData: null,
        // 销售额金额
        SalesData: null,
        // 商品热榜
        HotSellingGoodsData: null,
        // 销售额统计图
        SalesStatisticsData: null,
        // 合作商top5
        PartnersData: null,
        // 点位总数
        TotalNumberPointsData: null,
        // 合作商家
        MerchantsData: null,
        // 销售量分布
        DistributionSalesData: null
      },
      // 请求携带的参数
      time: {
        // 热销前十参数
        topValue: 10,
        // 销售类型
        collectType: 1,
        start: dayjs('2022-10-1').format('YYYY-MM-DD'),
        end: dayjs(new Date()).format('YYYY-MM-DD')
      },
      Mtime: {
        start: null,
        end: null
      }
    }
  },
  async created () {
    this.getWeekTime()
    // 获取星期几
    this.weeks = new Date().getDay()
    // 工单统计
    // const gdtj = await this.AcCollectWorkOrderStatusStatistics(this.time)
    // 销售额统计
    await this.DayFn()
    await this.jiequ()
    await this.fenbu(this.Mtime)
    console.log(this.AllDay.xAxis[0], this.AllDay.xAxis[0])
    // 订单量
    this.statistical.TotalNumberOrdersData = await this.AcTotalNumberOrders(this.time)
    // 销售额
    this.statistical.SalesData = await this.AcSales(this.time)
    // 热销
    this.statistical.HotSellingGoodsData = await this.AcHotSellingGoods(this.time)
    // 合作商top5
    this.statistical.PartnersData = await this.AcPartners()
    // 点位总数
    this.statistical.TotalNumberPointsData = await this.AcTotalNumberPoints()
    // 合作商家
    this.statistical.MerchantsData = await this.AcMerchants()
    // echarts图表
    await this.echarts(this.weeks)
    this.statistical.SalesData = await this.statistical.SalesData.slice(0, 3) * 10 / 1000
  },
  methods: {
    getWeekTime () {
      // var new_Date = new Date(2021,11,10) //获取指定日期当周的一周日期
      var newSDate = new Date() // 获取本周一周日期
      var timesStamp = newSDate.getTime()
      var currenDay = newSDate.getDay()
      var dates = []
      for (var i = 0; i < 7; i++) {
        var das = new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString()
        das.replace(/[年月]/g, '.').replace(/[日上下午]/g, '')
        dates.push(das)
      }
      console.log('一周时间：' + JSON.stringify(dates))
    },
    // VUEX接口调用
    ...mapActions(['AcCollectWorkOrderStatusStatistics', 'AcHotSellingGoods', 'AcMerchants', 'AcDistributionSales',
      'AcSalesStatistics', 'AcTotalNumberOrders', 'AcSales', 'AcPartners', 'AcTotalNumberPoints']),
    // echarts组件使用
    echarts (weeks) {
      // 基于准备好的dom，初始化echarts实例`
      LinearSetOption(this.$refs.Left, this.AllDay, weeks)
      ColumnarOption(this.$refs.Right, this.MDay)
      PieChartOption(this.$refs.SDBox, this.statistical.PartnersData)
    },
    async DayFn () {
      // 销售额统计
      this.statistical.SalesStatisticsData = await this.AcSalesStatistics(this.time)
      this.AllDay = this.statistical.SalesStatisticsData
      console.log(this.AllDay)
    },
    async fenbu (time) {
      // 销售量分布
      console.log(this.time)
      this.statistical.DistributionSalesData = await this.AcDistributionSales(time)
      this.MDay = this.statistical.DistributionSalesData
    },
    // 切换周月年样式
    async ChangeClass (item, index) {
      this.isindex = index
      if (item === '周') {
        const days = ['星期一', '星期二', '星期三', '星期四', '星期五'].splice(0, this.weeks)
        // console.log(this.AllDay, '周数据')
        this.Mtime = ''
        await this.DayFn(this.Mtime)
        await this.jiequ()
        await this.fenbu(this.Mtime)
        this.echarts(days)
      }
      if (item === '月') {
        await this.DayFn(this.Mtime)
        await this.fenbu(this.time)
        const res = this.AllDay.xAxis.map(item => {
          return dayjs(item).format('MM月DD日')
        })
        // console.log(this.AllDay.xAxis, '月数据', res)
        this.echarts(res)
      }
    },
    HzMoreFn () {
      this.$router.push({
        name: 'partner'
      })
    },
    // 计算周
    jiequ () {
      this.AllDay.series = this.statistical.SalesStatisticsData.series.splice(this.statistical.SalesStatisticsData.series.length - 1, this.weeks)
      this.AllDay.xAxis = this.statistical.SalesStatisticsData.xAxis.splice(this.statistical.SalesStatisticsData.xAxis.length - 1, this.weeks)
      this.Mtime.start = this.AllDay.xAxis[0]
      this.Mtime.end = this.AllDay.xAxis[0]
      console.log(this.statistical)
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;
  justify-content: space-between;
}
// 工单统计，销售统计
.BigBox {
  width: 75%;
  // 工单
  .GDBox {
    display: flex;
    border-radius: 20px;
    min-height: 166px;
    .One {
      font-weight: 700;
      background: #e9f3ff;
      background-image: url(),
        url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      text-align: left;
      padding: 15px;
      border-radius: 20px;
      // background-color: gold;
      flex: 1.2;
      span {
        font-weight: 400;
        font-size: 12px;
        color: #a6a9ad;
      }
      .details {
        display: flex;
        justify-content: space-evenly;
        p {
          color: #072074;
          font-size: 35px;
          font-weight: 700;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          margin-bottom: 5px;
          margin-top: 20px;
        }
        div {
        font-weight: 400;

          color: #93a9dd;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
    .Two {
      font-weight: 700;
      flex: 1;
      text-align: left;
      padding: 15px;
      margin-left: 20px;
      border-radius: 20px;
      background: #fbefe8
        url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
        calc(100% - 12px) 100%;
      span {
        font-weight: 400;
        font-size: 12px;
        color: #a6a9ad;
      }
      .undetails {
        display: flex;
        justify-content: space-evenly;
        p {
          color: #ff5757;
          font-size: 35px;
          font-weight: 700;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          margin-bottom: 5px;
          margin-top: 20px;
        }
        div {
        font-weight: 400;

          color: #de9690;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }
  // 销售
  .XSBox {
    background-color: red;
    border-radius: 20px;
    margin-top: 10px;
    min-height: 352px;
  }
}
// 销售数据
.XsBigBox{
  width: 98% !important;
  background-color: #fff;
  // background-color: rgba(255, 41, 41, 0.473);
  height:365px;
  border-radius: 20px;
  margin:10px 10px 0 10px;
  padding: 15px;
  .XsTop{
    display: flex;
    justify-content: space-between;
    margin:20px 0 20px 0;
    padding: 0 15px;
    .firstOne{
      font-weight: 700;
      span{
        font-weight: 400;
        font-size: 12px;
        margin-left: 10px;
        color: #999999;
      }
    }
    .yeru{
      display: flex;
      justify-content:space-around;
      align-items: center;
      width: 129px;
    height: 34px;
    background: rgba(233,243,255,.37);
    // background-color: red;
    border-radius: 10px;
    div{
      width: 37px;
    height: 25px;
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
    }
    .bianhua {
      background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #333;
    }
    }
  }
  .XsCjBox{
    display: flex;
    height: 80%;
    .LeftXSBox{
      flex:1;
    }
    .RightXSBox{
    flex:1;
    }
  }
}
// 侧边商品热榜
.XSBox{
  .HotS{
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    span{
    font-size: 12px;
    font-weight: 400;
    color:#999999;
    margin-left:10px;
    }
  }
  .icons{
    display: inline-block;
    position: relative;
    width:25px;
    height: 25px;
    margin: -12px -10px;
    // background-color: pink;
  }
  .text{
position:absolute;
left:39px;
color:#e9b499;
  }
.XSitemBox{
  line-height: 50px;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  .count{
    color:#737589;
    font-size: 13px;
  }
}
}
.last-index{
 left: 35px !important;
}
// 侧边盒子
.SideRight {
  background-color: #ffffff;
  border-radius: 20px;
  height: 543px;
  padding:20px;
  flex: 0.9;
}
// 底部盒子
.BottomBox {
  display: flex;
  justify-content: space-between;
  min-height: 340px;
  margin: 15px 0 0 10px;
  // 合作商点
  .BottomLeft {
    background-color: #fff;
    width: 60%;
    border-radius: 20px;
    padding:20px;
    .HZTop5{
      display:flex;
      justify-content:space-between;
      text-align: left;
      .HzTop5Txt{
        font-size: 16px;
        font-weight: 700;
      }
    }
    .Pie{
      display:flex;
      justify-content: space-between;
      .SDBox{
      min-height:350px;
      width: 100%;
      // flex:1;
      z-index:999;
      canvas{
      width: 100%;
      }

    }
    .DWBox{
      // flex:0.6;
      width: 120px;
    height: 185px;
    text-align: left;
    line-height: 40px;
    font-weight: 700;
    font-size: 25px;
    color:#072074;
    padding-top: 47px;
    padding-left: 40px;
    margin: 50px 0px;
    background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    .text{
      font-size: 12px;
      font-weight: 400;
    }
    }
    }
  }
  // 异常监控
  .BottomRight {
    // background-color: rgb(200, 255, 0);
    background-color: #fff;
    border-radius: 20px;
    flex: 0.9;
    .JKBox{
      display:flex;
      justify-content:space-between;
      padding:20px;
      .JKTxt{
        text-align: left;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
}
</style>
